<template>
  <div class="divContainer">
    <el-card class="box-card" :size="size" shadow="never">
      <div slot="header" class="clearfix">
        <el-row>
          <el-col :span="16">
            <div class="top">
              <div class="topDiv"><img class="image_3" referrerpolicy="no-referrer" :src="workIcon"/></div>
              <span class="title-span">工单信息</span>
            </div>

          </el-col>
          <el-col :span="8" style="text-align: right; border-bottom: 1px solid #eee;">
            <el-date-picker
              v-model="searchInfo.dates"
              type="daterange"
              :clearable="false"
              align="right"
              :size="size"
              unlink-panels value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="infoData">
            </el-date-picker>
          </el-col>
        </el-row>
      </div>
      <div class="workBottom">
        <div v-for="item,index in workOrder" class="work_div" @click="clickColor(index)">
          <div style="display: flex;margin-left: 20px;margin-top: 10px;">
            <div style="width: 60%;">
              <span style="font-size: inherit;">{{ item.name }}</span>
              <span @click="clickTop(item)" style="cursor: pointer;" class="worknum">{{ item.fm }}</span>

            </div>
            <img style="width: 60px;height: 60px;margin-left: 45px;" :src=item.icon alt="">
          </div>
          <div class="dialogInfo">
            <div style="width: 24%;text-align: center;">
              <div class="textColor" @click="clickBottomNum(1,item.name)">{{ item.paidan }}</div>
              <div>已派单</div>
            </div>
            <div style="width: 24%;text-align: center;">
              <div class="textColor" @click="clickBottomNum(2,item.name)">{{ item.jiedan }}</div>
              <div>已接单</div>
            </div>
            <div style="width: 24%;text-align: center;">
              <div class="textColor" @click="clickBottomNum(3,item.name)">{{ item.huidan }}</div>
              <div>已回单</div>
            </div>
            <div style="width: 24%;text-align: center;">
              <div class="textColor" @click="clickBottomNum(4,item.name)">{{ item.guidang }}</div>
              <div>已归档</div>
            </div>
          </div>

        </div>

      </div>
    </el-card>
    <el-dialog v-bind="dialogProps" :before-close="handleClose" :close-on-click-modal="false" :destroy-on-close="false"
               v-dialogDrag append-to-body>
      <iframe width="100%" height="100%" frameborder="0" marginwidth="0" marginheight="0" :src="iFrameUrl"></iframe>
    </el-dialog>
    <el-dialog v-bind="dialogProps2" :before-close="handleClose2" :close-on-click-modal="false"
               :destroy-on-close="false"
               v-dialogDrag append-to-body>
      <iframe width="100%" height="100%" frameborder="0" marginwidth="0" marginheight="0" :src="iFrameUrl2"></iframe>
    </el-dialog>
  </div>
</template>

<script>
import {firstPage} from '@/api/firstPage.js'
import moment from "moment";

export default {
  name: "workorder",


  data() {
    return {
      size: 'mini',
      changeColor: 0,
      timeequip: "",
      iFrameUrl: '',
      dialogProps: {
        visible: false,
        title: '设备入库',
        width: "90%",
        top: "5px",
      },
      workIcon: require('./images/wodezhangdan(1).png'),
      iFrameUrl2: '',
      dialogProps2: {
        visible: false,
        title: '设备入库',
        width: "90%",
        top: "5px",
      },
      searchInfo: {
        dates: [
          // new Date(new Date().setHours(0, 0, 0, 0) - 3600 * 1000 * 24 * 1),//默认开始时间
          new Date(new Date().getFullYear(),
            new Date().getMonth(),
            new Date().getDate(),),//默认开始时间
          new Date(
            new Date().getFullYear(),
            new Date().getMonth(),
            new Date().getDate(),
          ), // 默认结束时间
        ],
      },
      workOrder: [
        {
          fz: '',
          fm: '',
          icon: require('./images/组400.png'),
          name: '运维巡视',
          paidan: '',
          jiedan: '',
          huidan: '',
          guidang: ''
        },
        {
          fz: '',
          fm: '',
          icon: require('./images/组401.png'),
          name: '运维巡视',
          paidan: '',
          jiedan: '',
          huidan: '',
          guidang: ''
        },
        {
          fz: '',
          fm: '',
          icon: require('./images/组402.png'),
          name: '',
          paidan: '',
          jiedan: '',
          huidan: '',
          guidang: ''
        },
      ]
    }
  },
  mounted() {
    this.infoData()
    //每1分钟取一次
    setInterval(() => {
      this.infoData()
    }, 300000)
  },
  methods: {
    //下面数据链接跳转
    clickBottomNum(num, name) {
      let edate = moment(this.searchInfo.dates[1]).format('YYYY-MM-DD')
      let date = moment(this.searchInfo.dates[0]).format('YYYY-MM-DD')
      let gdzt
      if (name == '运维巡视') {
        gdzt = num == 1 ? '10' : num == 2 ? '15' : num == 3 ? '30' : '99'

        this.iFrameUrl2 = GLOBAL_URL.APP_URL + '/sgems//patorl/workOrderManagement.html?edate=' + edate + '&date=' + date + '&gdzt=' + gdzt
        // this.iFrameUrl2= 'http://localhost:8081/workOrderManagement.html?edate='+edate+'&date='+date+'&gdzt='+gdzt
        this.dialogProps2.visible = true;
        this.dialogProps2.title = '巡视工单信息'
      } else if (name == '设备消缺') {
        gdzt = num == 1 ? '10' : num == 2 ? '20' : num == 3 ? '50' : '100'
        this.iFrameUrl2 = GLOBAL_URL.APP_URL + '/sgems//defects/workOrderManagement.html?role=manage_center&edate=' + edate + '&date=' + date + '&gdzt=' + gdzt
        // this.iFrameUrl2= 'http://localhost:8082/workOrderManagement.html?role=manage_center&iscid=BJ-EN-USER-001&JSESSIONID=&edate='+edate+'&date='+date+'&gdzt='+gdzt
        this.dialogProps2.visible = true;
        this.dialogProps2.title = '消缺工单信息'
      } else if (name == '盘点工单') {
        gdzt = num == 1 ? '1' : num == 2 ? '2' : num == 3 ? '4' : '99'
        this.iFrameUrl2 = GLOBAL_URL.APP_URL + '/sgems//equip/workOrderManagement.html?role=manage_center&edate=' + edate + '&date=' + date + '&gdzt=' + gdzt
        //  this.iFrameUrl2= 'http://localhost:8081/workOrderManagement.html?role=manage_center&iscid=BJ-EN-USER-001&JSESSIONID=&edate='+edate+'&date='+date+'&gdzt='+gdzt
        this.dialogProps2.visible = true;
        this.dialogProps.title = '盘点工单信息'
      }
    },
    //上面数据跳转地址
    clickTop(item) {

      let edate = moment(this.searchInfo.dates[1]).format('YYYY-MM-DD')
      let date = moment(this.searchInfo.dates[0]).format('YYYY-MM-DD')
      if (item.name == '运维巡视') {
        this.iFrameUrl = GLOBAL_URL.APP_URL + '/sgems//patorl/workOrderManagement.html?edate=' + edate + '&date=' + date
        //  this.iFrameUrl= 'http://localhost:8081/workOrderManagement.html?edate='+edate+'&date='+date
        this.dialogProps.visible = true;
        this.dialogProps.title = item.name
        console.log(this.iFrameUrl)
      } else if (item.name == '盘点工单') {

        this.iFrameUrl = GLOBAL_URL.APP_URL + '/sgems//equip/workOrderManagement.html?role=manage_center&edate=' + edate + '&date=' + date
        //  this.iFrameUrl= 'http://localhost:8082/workOrderManagement.html?role=manage_center&iscid=BJ-EN-USER-001&JSESSIONID=&edate='+edate+'&date='+date
        this.dialogProps.visible = true;
        this.dialogProps.title = item.name
        console.log(this.iFrameUrl)
      } else if (item.name == '设备消缺') {
        this.iFrameUrl = GLOBAL_URL.APP_URL + '/sgems//defects/workOrderManagement.html?role=manage_center&edate=' + edate + '&date=' + date
        //  this.iFrameUrl= 'http://localhost:8083/workOrderManagement.html?role=manage_center&iscid=BJ-EN-USER-001&JSESSIONID=&edate='+edate+'&date='+date
        this.dialogProps.visible = true;
        this.dialogProps.title = item.name
      }

    },
    clickColor(index) {
      this.changeColor = index
    },
    handleClose(done) {
      // this.$confirm("确认关闭？")
      // .then((_) => {

      this.dialogProps.visible = false;
      // })
      // .catch((_) => { });
    },
    handleClose2(done) {
      // this.$confirm("确认关闭？")
      // .then((_) => {

      this.dialogProps2.visible = false;
      // })
      // .catch((_) => { });
    },
    infoData() {
      let day = moment(this.searchInfo.dates[0]).format('YYYY-MM-DD HH:mm:ss')
      let eday = moment(this.searchInfo.dates[1]).format('YYYY-MM-DD HH:mm:ss')
      let frames = {
        edate: eday,
        sdate: day,
      }
      firstPage.getGdXx(frames).then(res => {
        res.data.forEach((item, index) => {
          this.workOrder[index].fm = item.countNum
          this.workOrder[index].fz = item.hdNum
          this.workOrder[index].paidan = item.pdNum
          this.workOrder[index].jiedan = item.jdNum
          this.workOrder[index].huidan = item.hdNum
          this.workOrder[index].guidang = item.gdNum
          this.workOrder[index].name = item.type == 0 ? '盘点工单' : item.type == 1 ? '运维巡视' : '设备消缺'
        })
      })
    }

  },

}
</script>

<style scoped>
.divContainer {
  width: 100%;
  height: 100%;
  line-height: 35px;
}

.divContainer .el-card {
  border: 0px !important;
  border-radius: 0px;
  margin-bottom: 10px;
}

.divContainer .el-card .el-card__header {
  padding: 0px 0px 0px 0px !important;
  border-bottom: none;
}

.divContainer .top {
  /* border-bottom: 1px solid #eee; */
  border-bottom: 1px solid #eee;
  padding-left: 5px;
}

.title-font {
  color: var(--theme-color-09);
}

.title-span {
  font-weight: bold;
}

.workBottom {
  display: flex;
  justify-content: space-between;
  height: 100%;
}

.workBottom .work_div {
  width: 31.3%;
  height: 70%;
  border: 1px solid #eee;
}

.clickColor {
  border: 3px solid var(--theme-color-09);
}

.el-input__inner {
  border: 0 !important;
  /* box-shadow: 0px 0px 10px #e1e1e1; */
  border-bottom: 1px solid #eee;
  height: 30px;
  line-height: 30px;
}

.worknum {
  font-size: inherit;
  font-weight: bold;
  color: #1d8d87;
  margin-left: 5px;
}

.dialogInfo {
  width: 100%;
  height: 62%;
  background-color: #ecfafa;
  margin-top: 3px;
  padding-left: 20px;
  line-height: 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.textColor {
  color: #408c85;
  font-weight: bold;
  cursor: pointer;
}

.nameColor {
  color: #358681;
}

</style>
